docs(readme): add light/dark screenshot pair via picture element#38
Conversation
Replaces the TODO placeholder with a <picture> block: GitHub renders the dark-theme PNG to readers in dark mode, the light-theme PNG to the rest, with the light variant as the no-source-match fallback. Same demo label (Zebra Print Lab + Code 128 + SKU/LOT footer) shown in both themes with the barcode selected so the Properties panel displays useful state.
![gemini-code-assist[bot]](https://avatars.githubusercontent.com/in/956858?s=60&v=4){kind=small}
There was a problem hiding this comment.
Code Review
This pull request updates the README.md by replacing a placeholder with a picture element to display screenshots for both dark and light modes. The review feedback suggests optimizing the HTML by removing a redundant source tag and improving the accessibility of the image through more descriptive alt text.
| <picture> | ||
| <source media="(prefers-color-scheme: dark)" srcset="docs/screenshot-dark.png"> | ||
| <source media="(prefers-color-scheme: light)" srcset="docs/screenshot-light.png"> | ||
| <img alt="Zebra Print Lab — designer with a sample label" src="docs/screenshot-light.png"> | ||
| </picture> |
There was a problem hiding this comment.
The <picture> block can be optimized by removing the redundant light-scheme <source> tag, as the <img> element already serves as the default fallback for the light theme. Additionally, the alt text should be more descriptive to improve accessibility, incorporating details about the interface and the sample label shown to provide better context for screen reader users.
Improvement opportunities:
- Redundancy: The
<source media="(prefers-color-scheme: light)" ...>tag is unnecessary when the<img>tag points to the same file. - Accessibility: A more descriptive
altattribute helps users understand the visual context of the application (e.g., mentioning the designer interface and the barcode).
| <picture> | |
| <source media="(prefers-color-scheme: dark)" srcset="docs/screenshot-dark.png"> | |
| <source media="(prefers-color-scheme: light)" srcset="docs/screenshot-light.png"> | |
| <img alt="Zebra Print Lab — designer with a sample label" src="docs/screenshot-light.png"> | |
| </picture> | |
| <picture> | |
| <source media="(prefers-color-scheme: dark)" srcset="docs/screenshot-dark.png"> | |
| <img alt="Zebra Print Lab designer interface showing a sample label with a Code 128 barcode and the properties panel" src="docs/screenshot-light.png"> | |
| </picture> |
1 participant
Replaces the TODO placeholder with a block: GitHub renders the dark-theme PNG to readers in dark mode, the light-theme PNG to the rest, with the light variant as the no-source-match fallback. Same demo label (Zebra Print Lab + Code 128 + SKU/LOT footer) shown in both themes with the barcode selected so the Properties panel displays useful state.